<script setup>
import { reactive, computed } from "vue";

const person = reactive({ firstName: "张", lastName: "三" });

// person.fullName = computed(() => `${person.firstName} - ${person.lastName}`);
person.fullName = computed({
  get() {
    return `${person.firstName} - ${person.lastName}`;
  },
  set(v) {
    const [fn, ln] = v.split("-");
    person.firstName = fn.trim();
    person.lastName = ln.trim();
  },
});
</script>

<template>
  <div>
    <div>姓： {{ person.firstName }}</div>
    <div>名： {{ person.lastName }}</div>
    <div>全名：{{ person.fullName }}</div>
    <div>全名：<input type="text" v-model="person.fullName" /></div>
  </div>
</template>
